{% extends "_base.html" %}

{% block content %}
<h2 class="fw-bold">Общая статистика</h2>
<div class="row bg-white px-3 py-3 mx-2 my-5 rounded pb-5 shadow-lg">
    <div class="col">
        <div class="card border-light shadow" style="background: #eee">
            <div class="card-body bg-gray-900">
                <h5 class="card-title fw-bold">
                    <a href="/products/" class="link-dark text-decoration-none">Услуг</a>
                </h5>
                <i class="fas fa-microchip float-end"></i>
                <p class="card-text fw-bold fs-1">{{ products_count }} </p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card border-light shadow" style="background: #eee">
            <div class="card-body">
                <h5 class="card-title fw-bold">
                    <a href="/ads/" class="link-dark text-decoration-none">Рекламных компаний</a>
                </h5>
                <i class="fas fa-ad float-end"></i>
                <p class="card-text fw-bold fs-1">{{ advertisements_count }}</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card border-light shadow" style="background: #eee">
            <div class="card-body">
                <h5 class="card-title fw-bold">
                    <a href="/leads/" class="link-dark text-decoration-none">Лидов</a>
                </h5>
                <i class="fas fa-user-clock float-end"></i>
                <p class="card-text fw-bold fs-1">{{ leads_count }}</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card border-light shadow">
            <div class="card-body" style="background: #eee">
                <h5 class="card-title fw-bold">
                    <a href="/customers/" class="link-dark text-decoration-none">Активных клиентов</a>
                </h5>
                <i class="fas fa-user-check float-end"></i>
                <p class="card-text fw-bold fs-1">{{ customers_count }}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}